<template>
   <el-dialog
      title='部门'
      :visible.sync="dialogVisible"
      @open='getTableData'
      :lock-scroll='false'
      @close="dialogVisible = false"
      top='8vh'>
        
        <section class='classID'>
            集合ID {{setid}}
        </section>

        <section class="searchdxa">
          <el-input
            :on-icon-click='getTableData'
            @keyup.enter.native='getTableData'
            style="width:85%" 
            icon="search"
            v-model='serachVal'
          ></el-input>
          <h4>默认结果只显示前300</h4>
        </section>

        <section class="baseCase-dialog-table">
          <el-table
            :data="tableData"
            @row-click='handleRowClick'
            max-height='330'
          >

            <el-table-column
              v-for='(k,i) in tableCol'
              :prop='k.value'
              :label='k.label'
              :min-width='k.width'
              class-name='column'
              align="center"
              >
            </el-table-column>
            
          </el-table>

        </section>
    </el-dialog>
</template>

<script>
import Bus from './bus'

export default {
	data () {
		return {
			tableData: [],
			tableCol: [
				{
					label: '部门编号',
					value: 'deptid',
					width: 120
				}, {
					label: '部门简称',
					value: 'descrshort',
					width: 200
				}, {
					label: '部门全称',
					value: 'descr',
					width: 260
				}
			],
			dialogVisible: false,
			setid: '',
			serachVal: ''
		}
	},
	methods: {
		getTableData () {
			const params = {
				setId: this.setid,
				strInfo: this.serachVal
			}
			this.Axios
				.Post('/empBaseInfo/getAllDeptBySetId', params)
				.then((res) => {
					this.tableData = res.data.datas
				})
		},
		handleRowClick (row) {
			const { deptid, descrshort } = row
			Bus.$emit('dingdian', `${descrshort} (${deptid})`)
			Bus.$emit('deptId', deptid)
			this.dialogVisible = false
		}

	},
	mounted () {
		Bus.$on('dialogVisible', data => this.dialogVisible = data)
		Bus.$on('setid', data => this.setid = data)
	}
}
</script>

<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}
.baseCase-dialog-table {
  .el-table__body-wrapper {
    .column {
      cursor: pointer !important;
    }

    .el-table__row:hover {
      color: #20a0ff !important;
    }
  }
}

.searchdxa {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>